<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/css/sm.css">
    <link rel="stylesheet" href="/css/sm-extend.css">
  </head>
  <body><div class="page" id='page-colors'>
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="./index.html">
      <span class="icon icon-left"></span>
      返回
    </a>
    <h1 class="title">颜色主题</h1>
  </header>
  <nav class="bar bar-tab">
    <a class="tab-item active" href="#">
      <span class="icon icon-home"></span>
      <span class="tab-label">文案</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-me"></span>
      <span class="tab-label">文案</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-star"></span>
      <span class="tab-label">文案</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-cart"></span>
      <span class="tab-label">文案</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-settings"></span>
      <span class="tab-label">文案</span>
    </a>
  </nav>
  <div class="content">
    <div class="content-block-title">点击选择不同主题</div>
    <div class="content-block">
      <p class="buttons-row select-color">
        <a href="#" class="button tab-link active" data-color=''>蓝色</a>
        <a href="#" class="button tab-link" data-color='pink'>粉色</a>
        <a href="#" class="button tab-link" data-color='green'>绿色</a>
        <a href="#" class="button tab-link" data-color='yellow'>黄色</a>
      </p>
    </div>
    <div class="content-block">
      <p><a href="#" class="button">Usual Button 1</a></p>
      <p><a href="#" class="button button-light">light button</a></p>
      <p><a href="#" class="button button-dark">dark button</a></p>
      <p><a href="#" class="button button-success">success button</a></p>
      <p><a href="#" class="button button-danger">danger button</a></p>
      <p><a href="#" class="button button-warning">warning button</a></p>
      <p><a href="#" class="button disabled">disabled button</a></p>
    </div>
    
  </div>
</div>
<script type="text/javascript" data-main="/js/sui-requirejs" src="/lib/requirejs/require.js" ></script> 
</body>
</html>